<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <select name="" id="s"></select>
    <select name="" id="city">
      <option value="">请选择市</option>
    </select>
  </body>
  <script>
    var arr = [
      {
        name: '河南省',
        city: ['长安', '开封', '郑县', '许昌'],
      },
      {
        name: '浙江省',
        city: ['长安1', '开封2', '郑县3', '许昌4'],
      },
      ,
      {
        name: '广东省',
        city: ['长安a', '开封b', '郑县c', '许昌d'],
      },
    ]
    window.onload = function () {
      var sheng = document.getElementById('s')
      var sStr = `<option value="">请选择省</option>`
      for (var i in arr) {
        sStr += `<option value="${i}">${arr[i].name}</option>`
      }
      sheng.innerHTML = sStr
      sheng.addEventListener('change', function () {
        var thisCity = arr[this.value].city
        var cStr = `<option value="">请选择市</option>`
        for (var i in thisCity) {
          cStr += `<option value="${i}">${thisCity[i]}</option>`
        }
        document.getElementById('city').innerHTML = cStr
      })
    }
  </script>
</html>
